// 跑马灯核心功能组件
<template>
	<swiper class="notice-wrap" indicator-dotx vertical circular disable-touch="true" :current="tag" :autoplay="isAuto">
		<!-- autoplay="false" -->
		<!-- interval="5000" -->
		<swiper-item v-for="(item, index) in noticeList" :key="index">
			<view class="scroll">
				<text class="notice" >{{ item }}</text>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		name: 'Marque',
		// props: ['noticeContent'],
		props: {
			noticeContent: {
				type: String,
				default: ''
			},
			xTime: {
				type: Number,
				default: 15
			},
			textColor: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				timer: null,
				noticeLength: 1, //数据个数
				noticeList: [], //数据数组
				tag: 0, // 当前滚动展示的index
				isAuto: false,
			}
		},
		created() {
			let timer = setTimeout(() => {
				this.move()
				clearTimeout(timer)
			}, 1000)
		
		},
		mounted() {
			this.text = this.noticeContent
			this.noticeList = this.noticeContent.split("&&")
			if (this.noticeList.length > 2) {
				this.noticeLength = this.noticeList.length
			} else if (this.noticeList.length == 2) {
				this.noticeList.push(this.noticeList[0])
				this.noticeList.push(this.noticeList[1])
				this.noticeLength = this.noticeList.length
			} else {
				this.noticeLength = 1
			}
		},
		methods: {
			move() {
				const maxWidth = document.querySelector('.notice-wrap').clientWidth //获取元素宽度值
				const width = document.querySelectorAll('.notice')[this.tag].scrollWidth //需要滚动的宽度
				if (width <= maxWidth) {
					if (this.noticeLength > 1) {
						if (this.tag + 1 < this.noticeLength) {
							setTimeout(() => {
								this.tag += 1
								setTimeout(() => {
									this.move()
								}, 2000)
							}, 4000)
						} else {
							setTimeout(() => {
								this.tag = 0
								setTimeout(() => {
									this.move()
								}, 2000)
							}, 4000)
						}
					}
					return
				}
				const scroll = document.querySelectorAll('.scroll')[this.tag]
				let distance = 0
				// let xTime = 0
				// if (navigator.userAgent.includes('Android')) {
				//   xTime = 15
				// } else {
				//   xTime = 15
				// }
				const xWidth = width - maxWidth
				this.timer = setInterval(() => {
					//setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭
					distance -= 0.5
					if (-distance >= xWidth) {
						clearInterval(this.timer)
						if (this.noticeLength > 1) {
							if (this.tag + 1 < this.noticeLength) {
								setTimeout(() => {
									this.tag += 1
									distance = 0
									setTimeout(() => {
										this.move()
										scroll.style.transform = 'translateX(' + 0 + 'rpx)'
									}, 2000)
								}, 2000)
							} else {
								setTimeout(() => {
									this.tag = 0
									distance = 0
									setTimeout(() => {
										this.move()
										scroll.style.transform = 'translateX(' + 0 + 'rpx)'
									}, 2000)
								}, 2000)
							}
						} else {
							setTimeout(() => {
								scroll.style.transform = 'translateX(' + 0 + 'rpx)'
								setTimeout(() => {
									this.move()
								}, 100)
							}, 1500)
						}
					} else {
						scroll.style.transform = 'translateX(' + distance + 'rpx)' //scroll  沿着x轴方向平移distance
					}
				}, this.xTime)
			},
		},
		beforeDestroy() {
			clearInterval(this.timer) //停止执行this.timer
		},
	}
</script>

<style scoped>
	.notice-wrap {
		width: 90%;
		height: 40rpx;
		margin-top: auto;
		margin-bottom: auto;
		overflow: hidden;
		position: relative;
	}

	.notice {
		margin-right: 1000rpx;
		word-break: keep-all;
		white-space: nowrap;
		font-size: 24rpx;
		letter-spacing: 0;
		margin-top: -4rpx;
		width: 528px;
		font-family: PingFangSC-Regular;
		color:#3C75F2;
		/* margin-left: 20rpx; */
		font-weight: 500;
	}

	.scroll {
		display: flex;
		height: 100%;
		align-items: center;
	}
</style>